
{% extends 'layout/basic.html' %}
{% load static %}
{% block title %}用户注册{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/account.css' %}">
<style>
    .error-msg{
        color: red;
        position: absolute;
        font-size: 13px;
    }
    </style>
{% endblock %}



{% block content %}
     <div class="account">
        <div class="title">用户注册</div>
            <form id="regForm"  method="POST" novalidate>
            {% csrf_token %}
                {% for field in form %}
                    {% if field.name == 'code' %}
                        <div class="form-group">
                             <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                 <div class="row">
                                     <div class="col-xs-7">
                                         {{ field }}
                                         <span class="error-msg"></span>
                                     </div>
                                     <div class="col-xs-5">
                                         <input id="btnSms" type="button" class="btn btn-default" value="发送验证码">
                                     </div>
                                 </div>
                        </div>
                    {% else %}
                        <div class="form-group">
                         <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                         {{ field }}
                        <span class="error-msg"></span>
                        </div>
                    {% endif %}
                {% endfor %}
            <div class="row">
                 <div class="col-xs-3">
                <input id="btnSubmit" type="button" class="btn btn-primary" value="注册">
            </div>
            </div>


    </form>
    </div>
{% endblock %}



{% block js %}
    <script>
    //页面框架加载之后自动执行函数
    $(function () {
        bindClickBtnSms();
        bindClickSubmit();
    });

    // 点击提交 数据通过ajax提交到后台
        function bindClickSubmit() {
        $('#btnSubmit').click(function () {

            $('.error-msg').empty();
            //收集表单中的数据(找到每一个字段)
            //数据发送到后台
            $.ajax({
                url:"{% url 'register' %}",
                type: "POST",
                data: $('#regForm').serialize(),//所有字段数据+csrf token
                dataType:"JSON",
                success:function (res) {
                    if (res.status){
                        console.log(res.status);
                        location.href=res.data;//提交正确
                    }else{//提交错误a
                          $.each(res.error, function (key, value) {
                                $("#id_" + key).next().text(value[0]);
                            })
                    }
                }
            })
        })
    }

    /*点击获取验证码的绑定事件*/
    function bindClickBtnSms() {
        $('#btnSms').click(function () {
            $(".error-msg").empty();
            // 获取手机号
            var mobilePhone = $('#id_mobile_phone').val();
            console.log(mobilePhone);
            // 发送ajax请求
            $.ajax({
                url:"{% url 'send_sms' %}",
                type:"GET",
                data:{mobile_phone:mobilePhone,tpl:"register"},
                dataType:"JSON",
                success:function (res) {
                    console.log(res);
                    if (res.status){
                        sendSmsRdmind();
                    }else {
                        $.each(res.error,function (key,value) {
                            $('#id_'+key).next().text(value[0])
                        })
                    }
                }
            })
        })
    }
    {#倒计时#}
    function sendSmsRdmind() {
        var $smsBtn = $('#btnSms');
        $smsBtn.prop('disabled',true);
        var time = 60;
        var remind = setInterval(function () {
            $smsBtn.val(time+'秒重新发送');
            time = time -1;
            if (time<1){
                clearInterval(remind);
                $smsBtn.val('点击获取验证码').prop('disabled',false);
            }
        },1000)
    }
    </script>
{% endblock %}